<!--分组管理孙子分组页面-->
<template>
  <div class="minW1060-auto bg-fff mt10">
    <div class="pad20 ml10">
      <el-row>
        <el-col :span="18">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path:'/group'}">分组管理</el-breadcrumb-item>
            <el-breadcrumb-item
                :to="{path:'/group/edit2',query:{group:this.groupP,menuName:this.menuName}}">
              {{ menuName }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ subMenuName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="6" align="right">
          <div class="grid-content bg-purple-light">
            <div class="dlblock-mb20 pr10 ml20">
              <el-button type="primary" @click="addFn">添加</el-button>
            </div>
            <div class="dlblock-mb20 pr10">
              <el-button type="danger" @click="delGroupsFn">删除</el-button>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-table stripe
                v-loading="loading"
                :header-row-class-name="'my-table-header'"
                @selection-change="handleSelectionChange"
                @cell-click="cellChange"
                ref="myTable"
                border
                :data="groupList"
                style="width: 100%">

        <el-table-column type="selection" align="center" fixed width="55">
        </el-table-column>

        <el-table-column align="center" prop="name" label="分组名称">
          <template slot-scope="{row}">
            <i v-if="row.plus" class="el-icon-circle-plus-outline plus"></i>
            <i v-else class="el-icon-remove-outline plus"></i>
            <span v-if="row.flag">{{ row.name }}</span>
            <el-input v-else v-model="row.name" size="medium"
                      style="width: 180px;"
                      :maxlength="10"
                      class="input-text"
                      :value="row.name"
                      show-word-limit clearable>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="typeName" label="分组类型">
          <template slot-scope="{row}">
            <div v-if="row.flag">{{ row.typeName }}</div>
            <el-select v-else @change="dropChange(row)"
                       v-model="row.type"
                       class="select-text"
                       style="width: 180px"
                       placeholder="请选择">
              <el-option v-for="(item, index) in groupTypes" :key="index"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="carNum" label="车辆数">
        </el-table-column>
        <el-table-column align="center" prop="deviceNum" label="设备数">
        </el-table-column>
        <el-table-column align="center" prop="personNum" label="人员数">
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right">
          <template slot-scope="{row}">
            <div v-if="row.flag" aria-readonly="true">
              <el-button type="text" @click="row.flag=!row.flag">编辑</el-button>
              <el-button type="text" @click="delGroupFn(row.id)">删除</el-button>
            </div>
            <div v-else>
              <el-button type="text" @click="saveFn(row)">保存</el-button>
              <el-button type="text" @click="cancelFn(row)">取消</el-button>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>


<script>
import {delGroup, getGroups, saveGroup} from '@/api';

export default {
  data() {
    return {
      menuName: "",
      subMenuName: "",
      groupId: "",
      groupIdP: "",
      groupP: "",
      group: "",
      groupList: [],
      param: {
        id: '',
        total: 0,
        size: 10,
        page: 1
      },
      groupList1: [],
      groupTypes: [
        {
          id: 1,
          name: "集团",
        },
        {
          id: 2,
          name: "分公司",
        },
        {
          id: 3,
          name: "车队",
        },
      ],
      loading: false,
      plus: true,
    }
  },
  created() {
    this.menuName = this.$route.query.menuName
    this.subMenuName = this.$route.query.subMenuName
    this.groupId = this.$route.query.group.id
    this.groupP = this.$route.query.groupP
    this.group = this.$route.query.group
    this.param.id = this.groupId
    this.groupList.push(this.$route.query.group)
    this.getGroupsFn(this.param)
  },
  methods: {
    // 分组类型下拉发生改变
    dropChange(row) {
      // 改变 row的值
    },
    cancelFn(row) {
      row.flag = !row.flag
      // 重新查询
      this.getGroupsFn(this.param)
    },
    saveFn(row) {
      // 设置分组类型
      let typeName = this.getTypeName(row.type);
      row.typeName = typeName
      row.parentId = this.groupId
      // 改变显示
      row.flag = !row.flag
      saveGroup(row).then(res => {
        if (res != null && res.code == 200) {
          this.$message.success("添加成功")
          this.getGroupsFn(this.param)
        } else {
          this.$message.info("添加失败")
        }
      })
    },

    delGroupsFn() {
      if (this.groupIds.length != 0) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          try {
            this.groupIds.forEach(id => {
              delGroup(id)
            })
            this.$message.success('删除成功')
          } catch (e) {
            console.log(e)
          } finally {
            this.loading = false
            this.getGroupsFn(this.param)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },

    addFn() {
      let item = {
        flag: false,
        plus: true,
        name: "XXXX",
        type: 1,
        typeName: "",
        id: 0,
        parentId: 0,
      }
      this.groupList.push(item)
    },
    getTypeName(type) {
      switch (type) {
        case 0:
          return "未设置";
        case 1:
          return "集团";
        case 2:
          return "分公司";
        case 3:
          return "车队";
      }
      return "未知"
    },

    delGroupFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGroup(id).then(res => {
          if (res != null && res.code == 200) {
            this.$message.success("删除成功")
            this.getGroupsFn(this.param)
          } else {
            this.$message.info("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    handleSelectionChange(val) {
      this.groupIds = val.map(item => item.id)
    },

    cellChange(row, column, cell, event) {
      let classList = event.target.classList
      let el = event.target.querySelector(".plus")
      if (classList.contains("plus") || el != null) {
        row.plus = false
        // 子集界面
      }
    },

    expandChange(row, expanded) {
      this.getGroupsFn(row.id)
    },

    getGroupsFn(groupId) {
      this.loading = true
      getGroups(groupId).then(res => {
        if (res != null && res.code == 200) {
          this.groupList = []
          // this.groupList.push(this.group)
          this.groupList = this.groupList.concat(res.data.list);
          this.param.total = res.data.count;
          this.groupList.forEach(item => item.typeName = this.getTypeName(item.type))
        } else {
          this.$message.info(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }

}
</script>


<style>
.demo-table-expand {
  font-size: 0;
}

.input-text > input {
  text-align: center;
}

.select-text input {
  text-align: center;
}

.plus {
  margin-left: 5px;
}

i.el-icon-circle-plus-outline.plus {
  position: absolute;
  left: 50px;
  top: 20px;
}

i.el-icon-remove-outline.plus {
  position: absolute;
  left: 50px;
  top: 20px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

span.checkbox {
  position: relative;
  left: 5px;
  top: -1px;
}
</style>
